<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1280, initial-scale=1.0">
    <title>CSS 动画</title>
    <style>
        .container {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }

        .box {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            margin: 30px;
            transform: rotate(45deg);
        }

        .rules {
            list-style: none;
            counter-reset: rulecount 2;
        }

        .rules li {
            counter-increment: rulecount;
            position: relative;
        }

        .rules li:before {
            content: '§ ' counter(rulecount);
            position: absolute;
            transform-origin: 100% 100%;
            transform: translate(-100%, -100%) rotate(-90deg);
        }

        button {
            border: 0;
            padding: .5em 1em;
            color: #fff;
            border-radius: .25em;
            background-color: #143b6d;
            box-shadow: 0 .25em 0 rgba(23, 59, 109, 0.3), inset 0 1px 0 rgba(0, 0, 0, 0.3);
            transition: all 150ms
        }

        button:active {
            box-shadow: 0 0 0 rgba(23, 59, 109, 0.3), inset 0 1px 0 rgba(0, 0, 0, 0.3);
            transform: translateY(.25em);
        }

        body {
            background-color: #663399;
            margin: 2em;
        }

        .logo {
            color: #fff;
            font-family: Helvetica Neue, Arial, sans-serif;
            font-size: 2em;
            margin: 1em 0;
        }

        .box-outer {
            display: inline-block;
            animation: shift 4.5s 1s steps(3, start) backwards;
        }

        .box-inner {
            display: inline-block;
            width: .74em;
            height: .74em;
            background-color: #fff;
            animation-name: roll;
            animation-duration: 1.5s;
            animation-delay: 1s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            transform-origin: bottom right;
        }

        @keyframes roll {
            from {
                transform: translateX(-100%);
                animation-timing-function: ease-in-out;
            }

            20% {
                transform: translateX(-100%) skewX(15deg);
            }

            28% {
                transform: translateX(-100%) skewX(0deg);
                animation-timing-function: ease-out;
            }

            45% {
                transform: translateX(-100%) skewX(-5deg) rotate(20deg) scaleY(1.1);
                animation-timing-function: ease-in-out;
            }

            50% {
                transform: translateX(-100%) rotate(45deg) scaleY(1.1);
                animation-timing-function: ease-in;
            }

            60% {
                transform: translateX(-100%) rotate(90deg);
            }

            65% {
                transform: translateX(-100%) rotate(90deg) skewY(10deg);
            }

            70% {
                transform: translateX(-100%) rotate(90deg) skewY(0deg);
            }

            to {
                transform: translateX(-100%) rotate(90deg);
            }
        }

        @keyframes shift {
            from {
                transform: translateX(-300);
            }
        }

        p {
            animation-duration: 3s;
            animation-name: slidein;
            animation-iteration-count: infinite;
            animation-direction: alternate-reverse;
        }

        @keyframes slidein {
            from {
                margin-left: 100%;
                width: 300%;
            }

            to {
                margin-left: 0%;
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box"></div>
        <ol class="rules" start="3">
            <li>adfdfdfdf</li>
            <li>adfdfdfdf</li>
            <li>adfdfdfdf</li>
            <li>adfdfdfdf</li>
            <li>adfdfdfdf</li>
            <li>adfdfdfdf</li>
            <li>adfdfdfdf</li>
        </ol>
        <button>按钮</button>
        <h1 class="logo">
            <span class="box-outer"><span class="box-inner"></span></span>
            <span class="logo-box">Box</span><span class="logo-model">model</span>
        </h1>
        <p>akfjeiioeifjfeihfihfieifoejoifjoijj fjdi fijejiof jef </p>
    </div>
</body>

</html>